<template>
	<view class="change-password">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 change-password-wrap">
			<view class="pt-1 pb-4 pl-3 pr-3 change-password-panel">
				<u--form class="mb-4 forgot-password-form" labelWidth="70" :borderBottom="false" :model="cpForm"
					:rules="cpRules" ref="cpFormRef">
					<u-form-item label="昵称" prop="DispName" :borderBottom="true">
						<u--input v-model="cpForm.DispName" placeholder="请输入昵称" border="none" clearable></u--input>
					</u-form-item>
				</u--form>
				<u-button @click="handleChangeDispName" color="#007aff" shape="circle" text="保存"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		changeDispName,
		fetchUserInfo
	} from "@/apis/user.js";

	export default {
		data() {
			return {
				cpForm: {
					DispName: '',
				},
				cpRules: {
					DispName: {
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},


				},
			};
		},
		onLoad() {

		},
		methods: {
			async handleChangeDispName() {
				if (!await this.$refs.cpFormRef.validate()) return;
				console.log('this.fpForm', this.cpForm)
				const cpData = this.cpForm
				const res = await changeDispName(cpData)
				console.log('?', res)
				if (res.MsgCode == 0) {
					uni.showToast({
						title: '修改成功',
						duration: 500,
						icon: 'none'
					});
					const accountInfo = uni.getStorageSync('accountInfo') || {}
					let userInfoRes = await fetchUserInfo({
						AccountId: accountInfo.accountId,
						lang: 'zh_CN'
					})
					if (userInfoRes.MsgCode != 0) return
					accountInfo.userInfo = userInfoRes
					uni.setStorageSync('accountInfo', accountInfo);
					
					this.$navigateBack(this.$router, 1)
					

				} else {
					return uni.showToast({
						title: res.ErrMsg,
						duration: 3000,
						icon: 'none'
					});
				}
			},
		},
	}
</script>

<style lang="scss">
	.change-password {
		.top-bg {
			width: 100%;
			height: 120rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.change-password-wrap {
			margin-top: -72rpx;

			.change-password-panel {
				background-color: #fff;
				border-radius: $s-border-radius;
				box-shadow: $s-bg-shadow;
			}

		}
	}
</style>
